<template>
  <div>
    <div><div class="colorpicker-box" :style="{background:handStyle()}"></div></div>
        <h3>带编码显示的color选择器</h3>
      <div>  <ColorPicker
            :data="pickerColor"
            @update:isLinear="pickerColor.isLinear = $event"
            @update:direction="pickerColor.direction = $event"
            @update:leftColor="handUpdateElement($event, 0)"
            @update:rightColor="handUpdateElement($event, 1)"
          ></ColorPicker></div>
          <h3>无编码显示的color选择器</h3>
        <div>
          <ColorPicker
            :data="pickerColor"
            :isText="false"
            @update:isLinear="pickerColor.isLinear = $event"
            @update:direction="pickerColor.direction = $event"
            @update:leftColor="handUpdateElement($event, 0)"
            @update:rightColor="handUpdateElement($event, 1)"
          ></ColorPicker>
        </div>
  </div>
</template>
<script>
import ColorPicker from '@/components/color-modal/color-picker.vue'
export default {
  components: {
    ColorPicker,
  },
  data() {
    return {
      pickerColor: {
        isLinear: false, //是否线性
        color: ['#334251'], //选择的颜色
        direction: 'right', //方向
      },
    }
  },
  methods: {
    handStyle() { 
     return this.pickerColor.isLinear ? `linear-gradient(to ${this.pickerColor.direction},${this.pickerColor.color[0]} ,${this.pickerColor.color.length >= 2 ? this.pickerColor.color[1] : '#AE7DFF'})` : this.pickerColor.color[0]
    },
    handUpdateElement(value, cursor = null) {
      this.$set(this.pickerColor.color, cursor, value)
    },
  },
}
</script>

<style lang="less" scoped>
.colorpicker{
  &-box{
    width: 200px;
    border-radius: 5px;
    height: 30px;
  }
  div{
    padding: 10px;
  }
}

</style>
